<template id="fs-tmpl">
  <style>
    :host {
      display: block;
      width: 200px;
      height: 200px;
      perspective: 500px;
      --color: rebeccapurple;
    }

    .container {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.6, 0, 0.3, 1);
      transform: translateZ(-250px);
    }

    .container.flipped {
      transform: translateZ(-250px) rotateX(180deg);
    }

    .front, .back {
      border-radius: 50%;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color);
      backface-visibility: hidden;
      transform: translateZ(-250px);
    }

    .back {
      background: #FFF;
      transform: translateZ(-250px) rotateY(180deg) rotateZ(180deg);
    }

    .front button {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      outline: none;
      font-size: 60px;
      background: none;
      border: none;
      color: #FFF;
    }

    .front button:hover,
    .front button:focus {
      box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .back button {
      width: 25%;
      height: 25%;
      border-radius: 50%;
      outline: none;
      font-size: 24px;
      background: var(--color);
      border: none;
      color: #FFF;
      position: absolute;
      top: 50%;
      left: 50%;
      transition: transform 0.8s cubic-bezier(0.6, 0, 0.3, 1);
      transform: translate(-50%, -50%);
    }

    .back button:hover,
    .back button:focus {
      box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.4);
    }

    .flipped .back button:nth-of-type(1) {
      transform: translate(-50%, -150%);
      transition-delay: 0.1s;
    }

    .flipped .back button:nth-of-type(2) {
      transform: translate(50%, -50%);
      transition-delay: 0.15s;
    }

    .flipped .back button:nth-of-type(3) {
      transform: translate(-50%, 50%);
      transition-delay: 0.2s;
    }

    .flipped .back button:nth-of-type(4) {
      transform: translate(-150%, -50%);
      transition-delay: 0.25s;
    }

    .ripple {
      width: 1px;
      height: 1px;
      background: var(--color);
      position: absolute;
      left: 50%;
      top: 50%;
      transition: transform 0.6s cubic-bezier(0.6, 0, 0.3, 1);
      transform: translate(-50%, -50%) scale(0);
      border-radius: 50%;
      pointer-events: none;
      will-change: transform;
    }

    .ripple.expanded {
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto;
    }

    .shadow2px,
    .shadow12px {
      width: 100%;
      height: 100%;
      background: #000;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      box-shadow: 0 0 4px 2px #000;
      transition: transform 0.8s cubic-bezier(0.6, 0, 0.3, 1),
          opacity 0.5s cubic-bezier(0.6, 0, 0.3, 1);
      transform: scale(0.5) translateY(2px);
      opacity: 0.3;
    }

    .shadow12px {
      box-shadow: 0 0 24px 16px #000;
      opacity: 0;
    }

    .shadow2px.flipped,
    .shadow12px.flipped {
      opacity: 0;
      transform: translateY(80px) rotateX(180deg);
    }

    .shadow12px.flipped {
      opacity: 0.2;
    }

  </style>

  <div class="ripple"></div>
  <div class="shadow2px"></div>
  <div class="shadow12px"></div>

  <div class="container">
    <div class="front">
      <button>1</button>
    </div>
    <div class="back">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
    </div>
  </div>
</template>
<script src="inert.min.js"></script>
<script src="flip-switch.js"></script>
